<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_CSS常用值</title>
    <style>
        h1 {
            cilor: red; /*单词表现法*/
            /*rgb表示法：red,green,blue,取值范围【0-255】 */
            color: rgb(255, 0, 0);
            color: rgb(0, 255, 0);
            color: rgb(0, 0, 255);
            color: rgb(255, 0, 255);
            color: rgb(255, 255, 255);
            color: rgb(128, 128, 128);
            color: rgb(0, 0, 0);
            /*十六进制表示法：#rrggbb，
            rr.gg.bb分别表示red,green,blue,取值范围[00,ff]*/
            color: #ff0000;
            color: #00ff00;
            color: #0000ff;
            color: #ffffff;
            color: #000000;
            color: #808080;
            /*rgba表示法 ：red,green,blue,alpha,alpha表示透明度，取值范围[0,1]*/
        }

        /*div {*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*    border: 3px solid #000;*/
        /*}*/

        .d1 {
            background-color: rgba(255, 128, 0, 1);
        }

        .d2 {
            background-color: rgba(255, 0, 128, 0.7);
        }

        .d3 {
            background-color: rgba(128, 0, 255, .4);
        }

        .d4 {
            background-color: rgba(0, 128, 255, .2);
        }

        .d5 {
            background-color: rgba(0, 255, 128, 0.1);
        }
        #bgi{
            width:500px;
            height:500px;
            border:2px solid #000;
            /*background-image: url('../day01/img/04.jpg');*/
            /*背景处理：渐变（角度，颜色1，颜色2...）
            如果要写角度，角度值必须在第一个，单位是 deg  270deg = -90deg */
            background-image: linear-gradient(50deg,red,rebeccapurple);
        }
        #viewport{
            background-color: cyan;
            width: 100vw;/*100%视口宽度，全屏宽*/
            height:100vw;/*100%视口高度，全屏高*/
        }
    </style>
</head>
<body>
<!--<h1>测试色值</h1>-->
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>

<!--<div id="bgi"></div>-->
<!--<div>-->
<!--    <img src="../day01/img/04.jpg" alt="" width="100">-->
<!--</div>-->
 <div id="viewport"></div>
</body>
</html>